<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :is-back="false" title="微信" :background="{ background: '#f8f8f8'  }" title-color="#404133" :border-bottom="false"
		 z-index="1001">
			<view class="slot-wrap" slot="right">
				<u-icon name="plus-circle" size="36" @click="showSelect"></u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->
		<selectInput :list="selectList" :list-key="'name'" :show.sync="selectShow" @on-select="checkSelect" @close="closeSelect" />
		<searchInput />
		<view class="item" v-for="(item, index) in nowlist" @longtap="show=true;nowtap=index" :key="item.userId + 1" :class="item.isTop ? 'bg_view' : ''" hover-class="message-hover-class" @tap="linkTo(item)">
			<image mode="aspectFill" :src="item.HeadImg" />
			<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
			<view class="right u-border-bottom title-wrap">
				<view class="right_top">
					<view class="right_top_name u-line-1">{{ item.userName }}</view>
					<view class="right_top_time ">{{ item.sendtime }}</view>
				</view>
				<view class="right_btm ">
					<view class="u-line-1" v-if="item.contentType == 1">{{ item.content }}</view>
					<view class="u-line-1" v-if="item.contentType == 2">语音文件</view>
					<view class="u-line-1" v-if="item.contentType == 3">图片文件</view>
					<view class="">{{item.num}}</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14">
				<view style="padding: 10px;">
					<u-button size="mini" type="success" style="margin: 20px;padding: 0 90px;height: 40px;line-height: 40px; display: block;" @tap="click(nowtap,1)">置顶</u-button>
					<u-button size="mini" type="error" style="margin: 20px;padding: 0 90px;height: 40px;line-height: 40px;display: block;" @tap="click(nowtap,0)">删除</u-button>
				</view>
		</u-popup>
	</view>
</template>

<script>
	import searchInput from '@/components/searchInput/index.vue';
	import selectInput from '@/components/selectInput/selectInput.vue';
	export default {
		components: {
			searchInput,
			selectInput
		},
		data() {
			return {
				show:false,
				nowtap:{},
				selectShow: false,
				selectList: [{
					id: '1',
					name: '添加朋友',
					icon: 'man-add-fill'
				}, {
					id: '2',
					name: '扫一扫',
					icon: 'scan'
				}, {
					id: '3',
					name: '收付款',
					icon: 'fingerprint'
				}]
			};
		},
		onShow() {
			// setTimeout(()=>{
			// 	this.$store.state.nowlist = []
			// },2000)
			// console.log(this._user_info)
			// uni.setStorageSync('lifeData', {});
		},
		computed:{
			getnowlist(){
				return this.$store.state.nowlist;
			},
			getynum(){
				return this.$store.state.ynumlist;
			},
			getqnum(){
				return this.$store.state.qnumlist;
			}
		},
		onLoad() {
			var _this = this;
			uni.connectSocket({
				url: _this.$store.state.wsurl + '?uid=' + _this._user_info.userId,
				data() {
					return {
						uid: _this._user_info.userId
					};
				},
				header: {
					'content-type': 'application/json'
				},
				protocols: ['protocol1'],
				method: 'GET'
			});
			uni.onSocketOpen(function(res) {
				console.log('WebSocket连接已打开！');
			});
			uni.onSocketError(function(res) {
				console.log('WebSocket连接打开失败，restart...！');
				uni.connectSocket({
				    url: _this.$store.state.wsurl,
				    data() {
				        return {
				            uid:_this._user_info.userId
				        };
				    },
				    header: {
				        'content-type': 'application/json'
				    },
				    protocols: ['protocol1'],
				    method: 'GET'
				});
			});
			this.getlist();
			this.getbiao();//设置未读信息角标 聊天
			this.getbiao1();//设置未读信息角标 验证
			this.getbiao2();//设置未读信息角标 朋友圈
		},
		methods: {
			getlist() {
				// console.log(this.$store.state.url+'/getlist')
				var _this = this;
				uni.request({
					url: this.$store.state.url + '/getlist',
					method: 'POST',
					data: {
						uid: Number(this._user_info.userId)
					},
					success: res => {
						res = res.data;
						if (res.code == 200) {
							this.$u.vuex('firendList', res.lst);
							uni.onSocketMessage(function(res) {
								var obj = JSON.parse(res.data);
									for(var i in obj){
										let nowd = _this.firendList.filter(item => item.userId == obj[i].fromUserId)[0];
										if(obj[i].yanzheng){//朋友验证信息
											_this.yanzheng(obj[i],nowd);
										}else if(obj[i].flist){//朋友圈评论信息
											_this.pinglun(obj[i],nowd);
										}else if(obj[i].reset){
											_this.getlist()
										}
										else{//好友聊天信息
											_this.liaotiao(obj[i],nowd);
										}
									}
							});
							
						} else {

						}
					},
					fail: res => {
						uni.showToast({
							title: '服务器错误！',
							icon: 'none'
							// position:'top'
						});
					}
				});
			},
			
			//验证信息
			yanzheng(obj,nowd){
				var arr = this.ynumlist;
				for(var i in arr){
					var num = 1;
					var o = arr[i];
					if(o.fromUserId == obj.fromUserId){
						arr.splice(i,1);
						// num += o.num;
					}
					obj.num = num;
					arr.unshift(obj);
				};
				if(!arr.length){
					obj.num = 1;
					arr.unshift(obj);
				}
				this.$u.vuex('ynumlist', []);
				this.$u.vuex('ynumlist', arr);
			},
			//朋友圈评论
			pinglun(obj,nowd){
				
			},
			
			//聊天信息
			liaotiao(obj,nowd){
				var nums = 1,_this = this;
				var data = {
					content: obj.content,
					HeadImg: nowd.headImg,
					userId: nowd.userId,
					userName: nowd.userName,
					show: false,
					isTop: false,
					contentType: obj.contentType,
					sendtime: obj.sendtime,
				}
				var list = _this.nowlist;
				for (var is in list) {
					var o = list[is];
					if (o.userId == data.userId) {
						nums = Number(o.num) + 1;
						list.splice(is, 1);
						break;
					};
				};
				data.num = nums;
				list.unshift(data)
				_this.$u.vuex('nowlist', list);
				var oldarr = _this.sodata[nowd.userId + 'msg' + _this._user_info.userId]?_this.sodata[nowd.userId + 'msg' + _this._user_info.userId]:[];
				var msgda =  {
					hasBeenSentId: Date.now(), //已发送过去消息的id
					content: obj.content,
					fromUserHeadImg: nowd.headImg, //用户头像
					fromUserId: obj.fromUserId,
					isItMe: false, //true此条信息是我发送的  false别人发送的
					createTime: obj.sendtime,
					contentType: obj.contentType,
					contentDuration:obj.contentDuration?obj.contentDuration:0,
					anmitionPlay:false,
					sendtime:obj.sendtime
				};
				oldarr.push(msgda);
				_this.sodata[nowd.userId + 'msg' + _this._user_info.userId] = oldarr;
				_this.$u.vuex('sodata', _this.sodata);
			},
			//打开或者关闭弹窗
			showSelect() {
				this.selectShow = !this.selectShow;
			},
			//action 点击事件
			click(index, index1) {
				if (index1 == 0) {//删除
					var uid = this.nowlist[index].userId;
					delete this.sodata[uid + 'msg' + this._user_info.userId];
					this.nowlist.splice(index, 1);
					this.$u.vuex('nowlist', []);
					this.$u.vuex('nowlist', this.nowlist);
					this.$u.vuex('sodata', this.sodata);
				}else{//置顶
					var obj = {};
					for(var i in this.nowlist[index]){
						obj[i] = this.nowlist[index][i];
					};
					this.nowlist.splice(index, 1);
					this.nowlist.unshift(obj);
					this.$u.vuex('nowlist', []);
					this.$u.vuex('nowlist', this.nowlist);
				};
				this.show = false;
			},
			
			//点击导航栏自定义按钮
			onNavigationBarButtonTap({
				index
			}) {
				if (index == 0) {
					this.showSelect()
				}
			},
			//跳转
			linkTo({
				id,
				name,
				images,
				userId
			}) {
				this.$u.route({
					url: 'pages/chat/chat',
					params: {
						messageId: id,
						fromUserId: userId
					}
				});
			},
			//关闭弹窗
			closeSelect() {
				//小程序兼容
				this.selectShow = false;
			},
			//扫码
			checkSelect(index) {
				if (index == 1) {
					uni.vibrateLong();
					//扫码
					uni.scanCode({
						success: function(res) {
							// console.log('条码内容：' + res.result);
							this.$u.toast('条码类型:', res.scanType);
						}
					});
				}
			},
			getbiao(){
				var newVal = this.getnowlist;
				var str = 0;
				for(var i in newVal){
					var o = newVal[i];
					// console.log(o.num)
					str += o.num;
				}
				this.$u.vuex('fnum',str);
				// console.log(str)
				if(str>0){
					uni.setTabBarBadge({
					  index: 0,
					  text: str+''
					})
				}else{
					uni.removeTabBarBadge({
					  index: 0
					})
				}
			},
			getbiao1(){
				var newVal = this.getynum;
				var str = 0;
				for(var i in newVal){
					var o = newVal[i];
					str += o.num;
				}
				this.$u.vuex('ynum',str);
				if(str>0){
					uni.setTabBarBadge({
					  index: 1,
					  text: str+''
					})
				}else{
					uni.removeTabBarBadge({
					  index: 1
					})
				}
			},
			getbiao2(){
				var newVal = this.getqnum;
				var str = 0;
				for(var i in newVal){
					var o = newVal[i];
					// console.log(o.num)
					str += o.num;
				}
				this.$u.vuex('qnum',str);
				// console.log(str)
				if(str>0){
					uni.setTabBarBadge({
					  index: 2,
					  text: str+''
					})
				}else{
					uni.removeTabBarBadge({
					  index: 2
					})
				}
			}
		},
		watch:{
			getnowlist(newVal){
				// console.log(1231231)
				var str = 0;
				for(var i in newVal){
					var o = newVal[i];
					// console.log(o.num)
					str += o.num;
				}
				this.$u.vuex('fnum',str);
				// console.log(str)
				if(str>0){
					uni.setTabBarBadge({
					  index: 0,
					  text: str+''
					})
				}
				else{
					uni.removeTabBarBadge({
					  index: 0
					})
				}
			},
			getynum(newVal){
				// console.log(newVal)
				var str = 0;
				for(var i in newVal){
					var o = newVal[i];
					// console.log(o.num)
					str += o.num;
				}
				this.$u.vuex('ynum',str);
				console.log(str)
				if(str>0){
					uni.setTabBarBadge({
					  index: 1,
					  text: str+''
					})
				}
				else{
					uni.removeTabBarBadge({
					  index: 1
					})
				}
			},
			getqnum(newVal){
				// console.log(1231231)
				var str = 0;
				for(var i in newVal){
					var o = newVal[i];
					// console.log(o.num)
					str += o.num;
				}
				this.$u.vuex('qnum',str);
				// console.log(str)
				if(str>0){
					uni.setTabBarBadge({
					  index: 2,
					  text: str+''
					})
				}
				else{
					uni.removeTabBarBadge({
					  index: 2
					})
				}
			}
		}
		
	};
</script>

<style lang="scss" scoped>
	.content {
		.item {
			width: 750rpx;
			display: flex;
			align-items: center;

			// padding: 20rpx;
			image {
				width: 76rpx;
				height: 76rpx;
				margin: 20rpx;
				border-radius: 12rpx;
				flex: 0 0 76rpx;
			}

			.right {
				overflow: hidden;
				flex: 1 0;
				padding: 20rpx 20rpx 20rpx 0;

				&_top {
					display: flex;
					justify-content: space-between;

					&_name {
						font-size: 28rpx;
						color: $u-main-color;
						flex: 0 0 450rpx;
						overflow: hidden;
					}

					&_time {
						font-size: 22rpx;
						color: $u-light-color;
					}
				}

				&_btm {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 22rpx;
					color: $u-tips-color;
					padding-top: 10rpx;
				}
			}
		}

		.bg_view {
			background-color: #fafafa;
		}

		.slot-wrap {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
		}
	}
</style>
